<template>
  <div class="xtnav">
    <el-row class="tac">
      <el-col :span="24">
        <el-menu
          router
          :unique-opened="true"
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <!----------------------------------------- 菜品管理 -->
          <el-submenu index="/hindex/cp" v-show="qx.setCp">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>菜品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/hindex/cpSet">菜品设置</el-menu-item>
              <el-menu-item index="/hindex/cpType">菜品类型</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!------------------------------------ 运营管理 -->
          <el-submenu index="/hindex/yx" v-show="qx.setYy">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>运营管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/hindex/pbSet">排班管理</el-menu-item>
              <el-menu-item index="/hindex/yySet">营业管理</el-menu-item>
              <el-menu-item index="/hindex/czSet">餐桌管理</el-menu-item>
              <el-menu-item index="/hindex/hySet">会员管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--------------------------------------- 库存管理 -->
          <el-submenu index="/hindex/hc" v-show="qx.setKc">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>库存管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/hindex/xhSet">消耗品管理</el-menu-item>
              <el-menu-item index="/hindex/xhType">消耗品类型</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-------------------------------------- 基础信息管理 -->
          <el-submenu index="/hindex/jc" v-show="qx.setJc">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>信息管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/hindex/ygSet">员工管理</el-menu-item>
              <el-menu-item index="/hindex/zwSet">职位管理</el-menu-item>
              <el-menu-item index="/hindex/qxSet">权限管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!---------------------------------------- 系统设置 -->
          <el-submenu index="/hindex/xt" v-show="qx.setXt">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>系统设置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/hindex/DataBackup">数据备份</el-menu-item>
              <el-menu-item index="/hindex/The_Log">操作日志</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--------------------------------------------- 财务分析 -->
          <el-submenu index="/hindex/cw" v-show="qx.setCw">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>财务分析</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/hindex/Financial">财务管理</el-menu-item>
              <el-menu-item index="/hindex/Cost">成本管理</el-menu-item>
              <el-menu-item index="/hindex/Wage">工资管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters, mapActions, mapState } from "vuex";
export default {
  name: "xtnav",
  data() {
    return {};
  },
  methods: {
    ...mapActions(["getQx"])
  },
  computed: {
    ...mapState({
      myqx: function(state) {
        return state.navQx;
      }
    }),
    qx() {
      return this.myqx;
    }
  },
  created() {
    this.getQx();
  }
};
</script>

<style scoped lang="less">
</style>
